<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <el-breadcrumb
          slot="header"
          v-if="$route.query.id"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索区域 -->

        <el-form ref="form" :model="form" :inline="true">
          <el-row>
            <el-col :span="16">
              <el-form-item label="目录名称" prop="name">
                <el-input v-model="form.directoryName"></el-input>
              </el-form-item>
              <el-form-item
                label="状态"
                prop="region"
                style="margin-left: 30px"
              >
                <el-select
                  v-model="form.state"
                  placeholder="请选择"
                  style="margin-left: 10px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    style="width: 200px"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item>
                <!-- 清除按钮 -->
                <el-button size="small" @click="resetForm('form')"
                  >清除</el-button
                >
                <!-- 搜索按钮 -->
                <el-button
                  type="primary"
                  style="margin-left: 12px"
                  size="small"
                  @click="searchInforList"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="8" style="text-align: right">
              <!-- 返回学科 -->
              <el-form-item>
                  <el-button type="text"
                  style="color: #66b1ff"
                  v-if="$route.query.id" icon="el-icon-back"  @click="$router.back()">返回学科</el-button>
                <!-- <el-page-header
                  title="返回学科"
                  style="color: #66b1ff"
                  v-if="$route.query.id"
                  @click="$router.back()"
                >
                </el-page-header> -->
              </el-form-item>
              <!-- 新增目录按钮 -->
              <el-form-item>
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  style="display-flot: right"
                  size="small"
                  @click="addDirectorys()"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据总条目 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          :title="`数据一共${counts}条`"
        >
        </el-alert>

        <!-- 渲染目录表格 -->
        <el-table :data="directorysList" style="width: 100%; margin-top: 15px">
          <el-table-column type="index" label="序号" width="100px">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              {{ scope.row.state == 1 ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" prop="state">
            <!-- 操作按钮 -->
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="toggleState(scope.row)"
                >{{ scope.row.state == 1 ? "禁用" : "启用" }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state == 1"
                @click="editDirectory(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state == 1"
                @click="delDirectory(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->

        <el-pagination
          :current-page="query.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="query.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="counts"
          background
        >

        </el-pagination>

        <!-- 新增/编辑  弹框组件 -->
        <el-dialog
          :title="isEdit ? '编辑目录' : '新增目录'"
          :visible.sync="isShowDialog"
          width="400px"

        >
          <add-directorys
            v-if="isShowDialog"
            @closeDirectory="closeDirectory"
            :id="parentId"
            :isEdit="isEdit"
            :directorysList="directorysList"
            :subjectDetail="subjectDetail"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
// import { list as getCompanys } from '@/api/hmmm/companys'
// import { list as getQuestion } from '@/api/hmmm/questions'
// import { list as getSubjects } from '@/api/hmmm/subjects'
import { list, changeState, remove } from '@/api/hmmm/directorys'
// 导入新增目录组件
import AddDirectorys from '@/module-hmmm/components/directorys-add.vue'
// 导入dayjs
import dayjs from 'dayjs'
export default {
  name: 'Directorys',
  components: {
    AddDirectorys
  },
  data () {
    return {
      parentId: '', // 父id
      isShowDialog: false, // 是否显示新增目录弹框
      form: {
        dircetorysName: '',
        state: null, // 状态1开启 ,0 屏蔽
        subjectID: null // 学科ID
      },
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      options: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      directorysList: [], // 目录列表
      subjects: [], // 学科列表
      counts: null, // 数据总条数
      isEdit: false, // 是否是编辑
      subjectDetail: {} // 当前点击行的数据

    }
  },
  created () {
    // 调用获取目录列表的方法
    this.getDirectorysList()
  },
  methods: {
    // 删除
    async delDirectory (row) {
      const configRuselt = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }

      await remove(row)
      // 先判断 roleList 中数组的长度，如果长度等于 1，前面又执行删除，并且删除成功，就需要返回上一页
      if (this.directorysList.length === 1) {
        // 页码 -1
        this.query.page--

        // 在此判断当前是删除的是不是第一页的最后一条数据，如果是我们需要将页码重置为 1
        if (this.query.page <= 1) {
          this.query.page = 1
        }
      }
      // 给用户成功以后的提示
      this.$message.success('删除成功')
      this.getDirectorysList()
    },

    // 搜索
    async searchInforList () {
      const res = await list(this.form)
      //   console.log(res)
      this.directorysList = res.data.items
      this.query.page = res.data.page
      this.query.pagesize = res.data.pagesize
      this.counts = res.data.counts
    //   console.log(this.directorysList)
    },

    // 修改目录
    async editDirectory (row) {
      console.log(row)
      this.subjectDetail = row
      //   console.log(this.subjectDetail)
      // 在让弹框进行展示
      this.isShowDialog = true
      // 编辑状态
      this.isEdit = true
      //   this.directorysList = row
      this.parentId = row.id
    },

    // 点击取消关闭弹框  刷新列表
    closeDirectory () {
      this.isShowDialog = false
      this.getDirectorysList()
    },

    // 新增目录事件
    addDirectorys () {
      this.isShowDialog = true
      this.isEdit = false
    },

    // 点击切换按钮状态
    async toggleState (row) {
      // console.log(row.state)
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      row.state = row.state === 1 ? 0 : 1
      this.$message.success('操作成功')
    },

    // 重置表单数据
    resetForm () {
      this.form = {}
      this.$refs.form.resetFields()
      this.getDirectorysList()
    },

    // 获取目录列表数据
    async getDirectorysList () {
      if (this.$route.query) {
        this.form.subjectID = this.$route.query.id
        const data = {
          ...this.query,
          ...this.form
        }
        const res = await list(data)
        this.directorysList = res.data.items
        this.counts = res.data.counts
      } else {
        const res = await list(this.query)
        this.directorysList = res.data.items
        this.counts = res.data.counts
      }
    },

    // 每页条数发生改变时触发
    handleSizeChange (pagesize) {
      // 更新size
      this.query.pagesize = pagesize
      // 重发请求
      this.getDirectorysList()
    },

    // 页码发生改变时触发
    handleCurrentChange (curPage) {
      // alert(curPage)
      // 1. 更新页码
      this.query.page = curPage
      // 2. 重发请求
      this.getDirectorysList()
    }
  },
  filters: {
    // 格式化时间的方法
    formatTime (time) {
      // dayjs 方法接收需要格式化的时间
      // format 方法是指按照那种格式对时间进行格式化
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

          <style scoped>
          ::v-deep.el-table th{
          background-color:#fafafa;
          }
          ::v-deep.el-table th .is-leaf {
          border-bottom: 2px solid #e8e8e8;
          }

          .el-alert.el-alert--info.is-light {
              margin-bottom: 20px;
          }
          el-input {
            width: 200px;
            margin: 0 50px 7px;
            font-size: 16px;
          }
          ::v-deep i.el-alert__icon.el-icon-info.is-big {
            font-size: 16px;
          }
          .el-pagination {
            float: right;
          }
          ::v-deep tr.el-table__row {
            height: 55px;
          }
          ::v-deep .app-container {
            padding: 10px;
          }
          </style>
